<template>
  <p-modal
    v-model="visible"
    :title="title"
    :width="1000"
    :dialog-style="{ top: '40px' }"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div>
      <div class="connect_div">
        <div class="form_one">
          <div class="input_div">
            <p-input
              v-model="form.keyword"
              class="input"
              placeholder="请输入"
            />
            <span class="label">姓名</span>
          </div>
          <div class="input_div">
            <p-input v-model="form.mobile" class="input" placeholder="请输入" />
            <span class="label">联系电话</span>
          </div>
          <div class="search_div">
            <p-button
              class="button"
              type="primary"
              style="height: 32px !important"
              @click="handleSearch"
            >
              搜索
            </p-button>
            <p-button
              class="button"
              style="height: 32px !important"
              @click="handleReset"
            >
              重置
            </p-button>
          </div>
        </div>
      </div>

      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ y: 350 }"
        :data-source="datasourceMy"
        :loading="load"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
        <a
          slot="modelNumber"
          slot-scope="text, record"
          @click="$emit('number-click', record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';
import { postBindTeam } from '@/api/visit.js';

const defaultForm = {
  keyword: undefined,
  orgposRemark: undefined,
  positionName: undefined,
  mobile: undefined,
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择我方团队',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => ({}),
    },
    datasourceMy: {
      type: Array,
      default: () => [],
    },
    selectMy: {
      type: Array,
      default: () => [],
    },
    myKeys: {
      type: Array,
      default: () => [],
    },
    visitId: {
      type: String,
      default: '',
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataSource: [],
      form: {
        ...defaultForm,
      },
      columnKey: undefined,
      asc: undefined,
    };
  },

  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '姓名',
          dataIndex: 'name',
          ellipsis: true,
        },

        {
          align: 'center',
          title: '部门',
          dataIndex: 'departmentName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '职位',
          dataIndex: 'position',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '联系电话',
          dataIndex: 'mobile',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '性别',
          dataIndex: 'gender',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '邮箱',
          dataIndex: 'email',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {},
  created() {
    this.getSelect();
  },

  methods: {
    getSelect() {
      this.rowSelectionMixin.getCheckboxProps = (record) => {
        return {
          props: {
            disabled: this.myKeys.indexOf(record.id) !== -1,
          },
        };
      };
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
    },

    reset() {
      this.form = { ...defaultForm };
      this.paginationMixin.current = 1;
      this.paginationMixin.pageSize = 10;
      this.rowSelectionMixin.selectedRowKeys = [];
    },
    handleSearch() {
      this.$emit('my-list');
    },
    handleReset() {
      this.form = {
        ...defaultForm,
      };
      this.$emit('my-list');
      this.rowSelectionMixin.selectedRowKeys = [];
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    async handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择我方团队！');
        return;
      }
      const current = this.rowSelectionMixin.selectedRows;
      console.log('current: ', current);
      current.forEach((item) => {
        item.userId = JSON.parse(JSON.stringify(item.id));
        item.contactId = JSON.parse(JSON.stringify(item.uid));
        item.tel = item.mobile;
        item.department = item.departmentName;
        delete item.id;
        delete item.createTime;
      });
      const result = await postBindTeam(current, 1, this.visitId);
      if (result.data.code === 0) {
        this.$message.success('关联成功');
        this.$emit('my-table-list');
        this.handleCancel();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
  height: 440px !important;
}

// .poros-form {
//   box-sizing: border-box;
//   background-color: #f7f7f8;
//   padding: 10px;
//   padding-bottom: 0px;
//   width: 100%;
// }
// .poros-form-item {
//   width: 25%;
//   margin-bottom: 10px;
// }
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
.messageMaskContent-connect {
  width: 100%;
  height: 540px !important;
  overflow: auto;
}
.foot-connect {
  display: flex;
  justify-content: center;
  height: 35px;
  width: 100%;
}
.connect_div {
  width: 100%;
  background-color: #f7f7f8;
  height: 50px;
  margin-bottom: 20px;
}

.form_one {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
}
.input_div {
  width: 40% !important;
  line-height: 30px;
  margin-top: 7.5px;
}
.search_div {
  width: 20% !important;
  line-height: 30px;
  margin-top: 7.5px;
}

.input {
  width: 68% !important;
  float: right;
}
.label {
  float: right;
  margin-right: 10px;
}
.button {
  margin-left: 5px !important;
}
</style>
